import {CSSProperties, PropType} from 'vue'

/**
 * @desc 中文 正常粗细
 * @desc 元素p
 */
export const CnNormalP = defineComponent({
  props: {
    onClick: Function,
    style: Object as PropType<CSSProperties>
  },
  setup(props, {slots}) {
    return () => (
      <p
        class='font-regular truncate  font-normal'
        onClick={() => props.onClick && props.onClick()}
        style={Object.assign({color: '#8C8C8C'}, props.style)}
      >
        {slots.default?.()}
      </p>
    )
  }
})

/**
 * @desc 中文 粗细 500
 * @desc 元素span
 */
export const CnMediumP = defineComponent({
  props: {
    onClick: Function as PropType<(e: MouseEvent) => void>,
    style: Object as PropType<CSSProperties>
  },
  setup(props, {slots}) {
    return () => (
      <p
        class='font-kmedium truncate font-medium'
        onClick={e => props.onClick && props.onClick(e)}
        style={Object.assign({color: '#31456A'}, props.style)}
      >
        {slots.default?.()}
      </p>
    )
  }
})

/**
 * @desc 中文 加粗
 * @desc 元素p
 */
export const CnBoldP = defineComponent({
  props: {
    onClick: Function,
    style: Object as PropType<CSSProperties>
  },
  setup(props, {slots}) {
    return () => (
      <p
        class='font-kbold truncate font-bold'
        onClick={() => props.onClick && props.onClick()}
        style={Object.assign({color: '#31456A'}, props.style)}
      >
        {slots.default?.()}
      </p>
    )
  }
})

/**
 * @desc 中文 正常粗细
 * @desc 元素span
 */
export const CnNormalSpan = defineComponent({
  props: {
    onClick: Function,
    style: Object as PropType<CSSProperties>
  },
  setup(props, {slots}) {
    return () => (
      <span
        onClick={() => props.onClick && props.onClick()}
        class='truncate font-normal'
        style={Object.assign({color: '#8C8C8C', fontFamily: 'kaigengo-regular'}, props.style)}
      >
        {slots.default?.()}
      </span>
    )
  }
})

/**
 * @desc 中文 粗细 500
 * @desc 元素span
 */
export const CnMediumSpan = defineComponent({
  props: {
    onClick: Function,
    style: Object as PropType<CSSProperties>
  },
  setup(props, {slots}) {
    return () => (
      <span
        onClick={() => props.onClick && props.onClick()}
        class='font-kmedium truncate font-medium'
        style={Object.assign({color: '#31456A'}, props.style)}
      >
        {slots.default?.()}
      </span>
    )
  }
})

/**
 * @desc 中文 加粗
 * @desc 元素span
 */
export const CnBoldSpan = defineComponent({
  props: {
    onClick: Function,
    style: Object as PropType<CSSProperties>
  },
  setup(props, {slots}) {
    return () => (
      <span
        onClick={() => props.onClick && props.onClick()}
        style={Object.assign({color: '#31456A', fontFamily: 'kaigengo-bold'}, props.style)}
        class='truncate font-bold'
      >
        {slots.default?.()}
      </span>
    )
  }
})
